<template>
    <div style="height:100%;width:100%;">
        <div class="showCommentArea" >
            <span style="font-size: 20px;color: #463f3dd4;">历史浏览</span>
        </div>
        <div class="showCommentArea" style="margin: 0px 100px;width: calc(100% - 200px);padding: 0px;text-align: center;">
            <el-row >
                <el-col :span="6">
                    <span class="spanTextStyle" :style="visitStyle" @click="checkHistoryType('','visit')">历史浏览</span>
                </el-col>
                <el-col :span="6">
                    <span class="spanTextStyle" :style="likeStyle" @click="checkHistoryType('','like')">点赞</span>
                </el-col>
                <el-col :span="6">
                    <span class="spanTextStyle" :style="collectStyle" @click="checkHistoryType('','collect')">收藏</span>
                </el-col>
                <el-col :span="6">
                    <span class="spanTextStyle" :style="rateStyle" @click="checkHistoryByRate">评分</span>
                </el-col>
            </el-row>

        </div>
<!--            历史记录区域-->
        <div class="showCommentArea" style="min-height: 700px;max-height: 700px">
            <el-row style="width: 100%;height: 100%">
<!--                    内容展示-->
                    <el-row v-for="(blog,index) in blogs" :key="blog.id" style="padding-top: 10px;">
                        <el-col :span="6" style="border-bottom: 0px;height: 75px;">
                            <div v-if="rateStyle!=''" style="height: 100%;width: 100%">
                                <el-rate
                                        v-model="scores[index]"
                                        :icon-classes="iconClasses"
                                        void-icon-class="icon-rate-face-off"
                                        style="display: flex;align-items: center;justify-content: right;padding-right: 15px;height: 100%;"
                                        disabled
                                        :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
                                </el-rate>
                            </div>
                            <div v-else>
                                &nbsp;
                            </div>
                        </el-col>
                        <el-col :span="12" style="margin-bottom: 5px;z-index: 2;position: relative;border-bottom: 1px solid #755e5e59">
                            <el-row >
                                <el-col :span="3">
                                    <!--                         头像-->
                                    <div style="display: flex;align-items: start;justify-content: center;height: 100%;">
                                        <el-avatar v-if="blog.avatarUrl" :src="blog.avatarUrl" class="avatar"></el-avatar>
                                        <el-avatar v-else icon="el-icon-user-solid"></el-avatar>

                                    </div>
                                </el-col>
                                <el-col :span="21" >
                                    <!--                        展示评论-->
                                    <div style="width: 100%;margin-bottom: 5px">
                                        <!--                            用户nickname，博客时间-->
                                        <div style="width: 100%;display: flex;flex-direction: row;font-size: 14px;color: #777888;">
                                            <span style="margin: 0 10px 0 0;">{{blog.userNickname}}</span>
                                            <el-link style="margin: 0 10px 0 0;" :underline="false" @click="toBlogView(blog.id)">{{blog.title}}</el-link>

                                        </div>
                                        <!--                             博客内容-->
                                        <div style="width: 100%;margin-top: 10px">
                                            <div class="twoLine" style="width: 100%;text-align: left">
                                                <el-link :underline="false" @click="toBlogView(blog.id)">{{blog.content}}</el-link>
                                            </div>
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>

                        </el-col>
                        <el-col :span="6">&nbsp;</el-col>


                    </el-row>
<!--                    分页展示-->
                    <el-row style="margin-top: 20px;position: fixed;bottom: 41px;left: 41%;">
                        <el-col :span="24" class="pageAreaStyle">
                            <el-pagination
                                    @size-change="changePageSize"
                                    @current-change="changePageIndex"
                                    background
                                    :page-size="pageSize"
                                    :pager-count="5"
                                    layout="total, prev, pager, next, jumper"
                                    :total="totalSize">
                            </el-pagination>
                        </el-col>
                    </el-row>
            </el-row>


        </div>


    </div>
</template>

<script>
    import {constants} from "@/common/constants";

    export default {
        name: "MessageInform",
        data(){
            return{
                pageIndex:1,    //当前页序号
                pageSize:6,    //当前页面大小
                totalSize:0,    //查询记录总数
                userId:(localStorage.getItem('user'))?JSON.parse(localStorage.getItem('user')).id:null, //当前的用户id
                historyType: constants.historyType.visit,   //历史记录类型
                blogs:[] ,      //历史记录所涉及的所有博客
                checkedStyle:"border-bottom: 2px solid rgba(10, 174, 179, 0.88);padding-bottom: 5px;",       //选中的样式
                visitStyle:"" ,   //历史浏览样式
                likeStyle:"" ,   //点赞样式
                collectStyle:"" ,   //收藏样式
                rateStyle:"",   //评分样式
                iconClasses: ['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3'],  //评分
                scores:[],  // 与blog对应的评分

            }
        },
        created() {
            this.queryHistoryByUserId(this.historyType);
            this.visitStyle=this.checkedStyle;
        },
        methods:{
            //初始化博客列表
            initViews(){
                this.blogs=[];
            },
            //查询所有的评分包含的blogIds
            queryRateByUserId(){
                let blogIds=[];
                this.request.get("/index/rate-user-blog/queryRateByUserId",{
                    params:{
                        pageIndex: this.pageIndex,
                        pageSize:this.pageSize,
                        userId: this.userId,
                    }
                }).then(res=>{
                    if (res.code=="200"){
                        blogIds=res.data.rates.map(res=>res.blogId);
                        this.scores=res.data.rates.map(res=>res.rateScore);
                        this.totalSize=res.data.size;
                        this.queryAllBlogsByIds(blogIds);


                    }
                });
            },

            //切换至按照评分显示浏览记录
            checkHistoryByRate(){
                this.rateStyle=this.checkedStyle;
                this.visitStyle="";
                this.likeStyle="";
                this.collectStyle="";
                this.queryRateByUserId();
            },

            //改变历史浏览记录类型
            checkHistoryType(type,currentStyle){
                this.initViews();
                if (currentStyle=="visit"){
                    type=constants.historyType.visit;
                    this.visitStyle=this.checkedStyle;
                    this.likeStyle="";
                    this.collectStyle="";
                }
                if (currentStyle=="like"){
                    type=constants.historyType.like;
                    this.visitStyle="";
                    this.likeStyle=this.checkedStyle;
                    this.collectStyle="";
                }
                if (currentStyle=="collect"){
                    type=constants.historyType.collect;
                    this.visitStyle="";
                    this.likeStyle="";
                    this.collectStyle=this.checkedStyle;
                }
                this.rateStyle="";
                this.historyType=type;
                this.queryHistoryByUserId(this.historyType);
            },
            //改变分页中的页面大小
            changePageSize(newPageSize){
                this.pageSize=newPageSize;
                this.queryHistoryByUserId(this.historyType);
            },
            //改变当前页的序号
            changePageIndex(newPageIndex){
                this.pageIndex=newPageIndex;
                this.queryHistoryByUserId(this.historyType);

            },
            //查询所有的历史记录包含的blogIds
            queryHistoryByUserId(type){
                let blogIds=[];
                this.request.get("/index/history/queryHistoryByUserId",{
                    params:{
                      pageIndex: this.pageIndex,
                      pageSize:this.pageSize,
                      historyType: type,
                      userId: this.userId,
                    }
                }).then(res=>{
                    if (res.code=="200"){
                        blogIds=res.data.histories.map(res=>res.blogId);
                        this.totalSize=res.data.size;
                        this.queryAllBlogsByIds(blogIds);

                    }
                });
            },
            //根据blogIds查询所有的blog
            queryAllBlogsByIds(blogIds){
                this.request.post("/index/blog/queryAllBlogsByIds",blogIds).then(res=>{
                    if (res.code=="200"){
                        this.blogs=res.data;
                    }
                });
            },
            //跳转到博客展示界面
            toBlogView(id){
                this.$router.push({
                    path: '/frontFramework/blogView',
                    query: {
                        id: id,
                    }
                })
            }
        }


    }
</script>

<style scoped>

    .pageAreaStyle{
        width: 100%;
        text-align: center;
    }

    .spanTextStyle{
        font-size: 15px;
        color: #463f3dd4;
        cursor: pointer;
    }


    .commentContentArea{
        width: calc(100% - 20px);
        margin-top: 5px;
        height: 25px;
        background: rgba(140, 157, 151, 0.17);
        margin-right: 20px;
        color: #826a5fa6;
        font-size: 15px;
        padding: 5px;
        line-height: 25px;
    }

    /*超过两行省略号*/
    .twoLine{
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: 15px;
        line-height: 20px;
    }


    .showCommentArea{
        width: calc(100% - 40px);
        height: 100%;
        padding:20px 20px;
    }
</style>